<template>	
	<view class="index-list animated fadeIn fast">
		<!--商品搜索-->
		<view class="goods-bar">
			
			<view class="goods-index-detail">
				
				
				<view class="s-list-detail" v-for="(items,index) in item" @click="goodsdetail(items)">
					<view class="t-list-img">
						<image :src="items.PicLogo" mode="widthFix" lazy-load></image>
					</view>
					<view class="goods-index-title">						
						<image src="../../static/buytao/tianmao.png" mode="widthFix" lazy-load v-if="items.ShopType=='天猫'"></image>
						<image src="../../static/buytao/tianmao.png" mode="widthFix" lazy-load v-if="items.ShopType=='淘宝'"></image>
						<text>{{items.Title}}</text>
					</view>
					<view class="goods-index-money">
						<text>{{items.CouponMoney}}元劵</text>
						<text>约赚{{items.Commission}}</text>
					</view>
					<view class="goods-index-price">
						￥<text>{{items.EndPrice}}</text>
						<text><del>￥{{items.Price}}</del></text>
					</view>
					<view class="goods-index-shop">
						<text>{{items.ShopName}}</text>
						<text>已售{{parseFloat(items.MonthSale/10000).toFixed(2)}}万</text>
					</view>
				</view>
				
				
			</view>
		</view>
		<!--商品搜索结束-->
	</view>
		
	
</template>

<script>
	import loadMore from "../../components/common/load-more"
	import commonList from "../../components/common/common-list"
	export default {
		props: {
			item: null,
			index: Number,
		},
		data() {
			return {
				
			}
		},
		components:{
			loadMore,
			commonList,
		},
		methods: {
			goodsdetail(goods){
				uni.navigateTo({
					url: '../product/product?site='+goods.Site+"&goods_id="+goods.GoodsId,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
		}
	}
</script>

<style scoped>
	/*菜单*/
	.menu{
		width:95%;
		display: block;
		margin: 30upx auto;
		border-radius:20upx;
		white-space: nowrap;
	}
	.nav-bar-wrap {      //  关键的样式
	  display: flex;
	  flex-flow: column wrap;
	  height: 400rpx;
	}
	.scroll-view_H{
		width: 99%;
		display: flex;
		flex-flow: column wrap;
		height: 400rpx;
	}
	.scroll-view-item_H{
		width: 20%;
		display: inline-block;
		flex-wrap: nowrap;
	}
	
	.view-item-menu{
		display: block;
		text-align:center;
		line-height:40px;
	}
	.view-item-menu>image{
		margin:0 auto;
		width:80%;
		display: block;
	}
	.view-item-menu text{
		display:inline-block;
	}
	.home-list-item{
		width:95%;
		margin:0 auto;
		padding:1% 0;
		display: flex;
		flex-direction: row;
		white-space: nowrap;
		justify-content:left;
		flex-wrap:wrap;
	}
	.s-list-content{
		flex: 1;
		padding:1%;
	}
	.s-list-content>text:first-child{
		font-weight:bold;
		font-size:30upx;
	}
	.s-item-short{
		color:#ccc;
		font-size:25upx;
	}
	.s-item{
		width: 100%;
		display:block;
		text-align:center;
		
	}
	.t-list-img image{
		width:100%;
		height:200upx;
		margin-top:10upx;
		border-radius:15upx;
	}
	
	
	/*商品菜单*/
	.goods-menu{
		width:95%;
		display: block;
		margin: 30upx auto;
		border-radius:20upx;
		padding-top:20upx;
	}
	.goods-scroll-view-item_H{
		display: flex;
		flex-direction:row;
		flex-wrap:wrap;
		white-space:nowrap;
	}
	.goods-view-item-menu{
		display: block;
		text-align:center;
		line-height:40px;
		padding: 0 5%;
		flex:1;
	}
	.goods-view-item-menu>image{
		margin:0 auto;
		width:90%;
		display: block;
	}
	.goods-view-item-menu text{
		display:inline-block;
		font-size:20upx;
	}
	
	
	/*商品搜索栏目*/
	.goods-search-bar{
		width:100%;
		display: flex;
		flex-direction:row;
		flex-wrap:wrap;
		white-space:nowrap;	
	}
	.goods-search-menu{
		width: 25%;	
		display: block;
		text-align:center;
		line-height:40px;
	}
	.goods-search-menu>text{
		display: block;
	}
	.goods-search-image{
		width:40upx;
		height:40upx;
		display:inline-block;
		position:relative;
	}
	.goods-search-image>image{
		margin-left:10upx;
		margin-top:3upx;
		display:block;
		width:15upx;
	}
	
	.goods-index-detail{
		width:96%;
		display: flex;
		flex-direction:row;
		flex-wrap:wrap;
		white-space:nowrap;
		padding:2%;
	}
	.goods-index-detail>view:nth-child(odd){
		margin-right:2%;
	}
	
	.s-list-detail{
		width:49%;
		margin-bottom:20upx;
	}
	.goods-index-title{
		width:100%;
		display:flex;
	}
	.goods-index-title>image{
		width:50upx;
		height:50upx;
		display:inline-block;
		position:relative;
	}
	.goods-index-title>text{
		display:block;
		padding-left:10upx;
		width:80%;
		white-space: nowrap; /* 因为设置了block，所以需要设置nowrap来确保不换行 */
		overflow: hidden; /* 超出隐藏结合width使用截取采用效果*/
		text-overflow: ellipsis; /* 本功能的主要功臣，超出部分的剪裁方式 */
		-o-text-overflow: ellipsis; /* 特定浏览器前缀 */
		text-decoration: none; /* 无用 */
	}
	.goods-index-money{
		margin-top:20upx;
	}
	.goods-index-money>text:first-child{
		background:#ffd9d9;
		font-size:15upx;
		padding:7upx 15upx;
		color:#F76260;
		border-radius:5upx;
	}
	.goods-index-money>text:last-child{
		background:#8A6DE9;
		font-size:15upx;
		padding:7upx 15upx;
		color:#fff;
		margin-left:20upx;
		border-radius:10upx;
	}
	.goods-index-price{
		color:#F76260;
	}
	.goods-index-price>text:first-child{
		font-size:40upx;
	}
	.goods-index-price>text:last-child{
		color:#ccc;
		margin-left:20upx;
	}
	.goods-index-shop{
		font-size:20upx;
		color:#ccc;
	}
	.goods-index-shop>text:last-child{
		margin-left:20upx;
	}
	
</style>
